<template>
    <div>
        <el-row :gutter="20" class="header">
            <el-col :span="7">
                <el-input placeholder="请输入" clearable v-model="queryForm.query"></el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="initUserList">{{ $t('table.search') }}</el-button>
            <el-button type="primary">{{ $t('table.adduser') }}</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column
                v-for="(item, index) in options"
                :key="index"
                :width="item.width"
                :prop="item.prop"
                :label="$t(`table.${item.label}`)">
                <template v-slot="{ row }" v-if="item.prop === 'mg_state'">
                    <el-switch v-model="row.mg_state"></el-switch>
                </template>
                <template
                    v-slot="{ row }"
                    v-else-if="item.prop === 'create_time'">{{ $filters.filterTimes(row.create_time) }}</template>
                <template #default v-else-if="item.prop === 'action'">
                    <el-button size="small" type="primary" :icon="Edit"></el-button>
                    <el-button size="small" type="warning" :icon="Setting"></el-button>
                    <el-button size="small" type="danger" :icon="Delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { Search, Edit, Setting, Delete } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { userList } from '@/api/user';
import { options } from './options';

const queryForm = ref({
    query: '',
    pagesize: 10,
    pagenum: 1
});

const tableData = ref([]);

const initUserList = async() => {
    const res = await userList(queryForm.value);
    tableData.value = res.users;
};

onMounted(() => {
    initUserList();
});
</script>

<style lang="scss" scoped>
.header {
    padding-bottom: 20px;
    box-sizing: border-box;
}
</style>
